<template>
	<div class="c-chartpanel" :id="localUUID"></div>
</template>

<script>
import moment from "moment";
import { Chart, registerShape } from "@antv/g2";
import { createUUID } from "@/common/js/mUtils";
import componentRefresh from "@/mixins/componentRefresh";
//准备数据
const DATA = [];
export default {
	name: "CChartpanel",
	data() {
		return {
			localUUID: createUUID(),
		};
	},
	mixins: [componentRefresh],
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
		width: {
			type: Number,
			default: 300,
		},
		height: {
			type: Number,
			default: 300,
		},
		ratio: {
			type: Number,
			default: 1,
		},
		uuid: String,
	},
	computed: {
		dataTrigger() {
			if (this.props[1].fields[0].value.dataJson.json) {
				let result = this.props[1].fields[0].value.dataJson.json;
				let dataobj = "{}";
				try {
					dataobj = JSON.parse(result);
				} catch (e) {
					console.warn(e);
					this.$message.error("JSON格式有误请重试");
					dataobj = {};
				}
				return dataobj;
			} else {
				return DATA;
			}
		},
		modelTrigger() {
			return this.props[1].fields[0].value.dataJson.model;
		},
		LegendTextColor() {
			return this.props[0].fields[3].value[0].value.value;
		},
		// LegendStyle() {
		// 	return this.props[0].fields[3].value[1].value.value;
		// },
		// LegendAlign() {
		// 	return this.props[0].fields[3].value[2].value.value;
		// },
		// LegendPosition() {
		// 	return this.props[0].fields[3].value[3].value.value;
		// },
		ChageColor() {
			return this.props[0].fields[3].value[1].value.value;
		},
		RowColor1() {
			return this.props[0].fields[3].value[2].value.value;
		},
		RowColor2() {
			return this.props[0].fields[3].value[3].value.value;
		},
		msg() {
			return this.props[0].fields[3].value[4].value.value;
		},
	},
	watch: {
		dataTrigger(val) {
			if (val && this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		modelTrigger() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		LegendTextColor(val) {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		ChageColor() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		RowColor1() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		RowColor2() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		msg() {
			if (this.chartInstance) {
				this.chartInstance.destroy();
				this.initData();
			}
		},
		width(val) {
			this.resizeChart();
		},
		height(val) {
			this.resizeChart();
		},
	},
	mounted() {
		this.initData();
	},
	methods: {
		initData() {
			let width = parseInt(this.width);
			let height = parseInt(this.height);
			this.initMapping();
			registerShape("point", "pointer", {
				draw(cfg, container) {
					const group = container.addGroup();
					const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
					// 绘制指针
					group.addShape("line", {
						attrs: {
							x1: center.x,
							y1: center.y,
							x2: cfg.x,
							y2: cfg.y,
							stroke: cfg.color,
							lineWidth: 5,
							lineCap: "round",
						},
					});
					group.addShape("circle", {
						attrs: {
							x: center.x,
							y: center.y,
							r: 9.75,
							stroke: cfg.color,
							lineWidth: 4.5,
							fill: "#fff",
						},
					});

					return group;
				},
			});

			this.chartInstance = new Chart({
				container: this.localUUID,
				autoFit: false,
				width: width,
				height: height,
			});
			this.chartInstance.data(this.dataTrigger);
			this.chartInstance.scale(this.mappings[0].field, {
				min: 0,
				max: 100,
				tickInterval: 10,
			});
			this.chartInstance.coordinate("polar", {
				startAngle: (-9 / 8) * Math.PI,
				endAngle: (1 / 8) * Math.PI,
				radius: 0.75,
			});

			let pos = `${this.mappings[0].field}*1`; //映射字段

			this.axisX();
			this.axisY();
			this.legend();
			this.chartInstance //点配置
				.point()
				.position(pos)
				.shape("pointer")
				.color(this.ChageColor)
				.animate({
					appear: {
						animation: "fade-in",
					},
				});
			// 绘制仪表盘背景
			this.chartInstance.annotation().arc({
				top: false,
				start: [0, 1],
				end: [100, 1],
				style: {
					// 底灰色
					stroke: '#4754FF55',
					lineWidth: 18,
					lineDash: null,
				},
			});
			console.log("this.mappings", this.mappings);
			console.log("this.dataTrigger", this.dataTrigger);
			// 绘制指标
			this.chartInstance.annotation().arc({
				start: [0, 1],
				end: [this.dataTrigger[0][this.mappings[0].field], 1],
				style: {
					stroke: this.LegendTextColor,
					lineWidth: 18,
					lineDash: null,
				},
			});
			// 绘制指标数字
			this.chartInstance.annotation().text({
				position: ["50%", "85%"],
				content: this.msg,
				style: {
					fontSize: 20,
					fill: this.RowColor1,
					textAlign: "center",
				},
			});
			this.chartInstance.annotation().text({
				position: ["50%", "90%"],
				content: `${this.dataTrigger[0][this.mappings[0].field] * 1} %`,
				style: {
					fontSize: 36,
					fill: this.RowColor2,
					textAlign: "center",
				},
				offsetY: 15,
			});

			this.chartInstance.render();
		},
		initMapping() {
			let model = this.props[1].fields[0].value.dataJson.model;
			this.mappings = model.map((m) => {
				let field = m.field;
				let mapping = m.mapping;
				let key = mapping || field;
				return { field: key };
			});
			if (!this.props[1].fields[0].value.dataJson.json) {
				this.mappings = [
					{
						field: "Value",
					},
				];
			}
		},
		resizeChart() {
			let width = parseInt(this.width);
			let height = parseInt(this.height);
			this.chartInstance.changeSize(width, height);
		},
		legend() {
			this.chartInstance.legend(false);
		},
		axisX() {
			this.chartInstance.axis(1, false);
		},
		axisY() {
			this.chartInstance.axis(this.mappings[0].field, {
				line: null,
				label: {
					offset: -36,
					style: {
						fontSize: 18,
						textAlign: "center",
						textBaseline: "middle",
					},
				},
				subTickLine: {
					count: 4,
					length: -15,
				},
				tickLine: {
					length: -24,
				},
				grid: null,
			});
		},
	},
};
</script>

<style>
.c-chartcolumnar {
	width: 100%;
	height: 100%;
}
</style>
